<template>
	<view>
		<!-- 自定义头部导航 -->
		<!-- <page-meta>
			<navigation-bar :title="'原材料收货'" front-color="#000000" background-color="#FBFBFF" fixed />
		</page-meta> -->
		<view class="page">
			<view class="upload-scan">
				<scan-bar id="scanInput" ref="scanBarRef" placeholder="扫描工序流转条码"
					@code-scanned="getScanResult" :key="datekey"></scan-bar>
				<u--input style="margin-top: 10px;" v-model="workCenterCodeName" class="input-box" placeholder="请选择工作中心"
					readonly @click="hideKeyboard"></u--input>
				<u-picker :show="showWorkCenter" :columns="workCenterList" keyName="name" immediateChange
					@cancel="showWorkCenter = false" @confirm="workCenterSelect"></u-picker>
			</view>


			<view class="area-header">
				<u-text text="待转移在制品">
				</u-text>
				<u-text :text="'已扫'+' ' + scannedList.length" align="right">
				</u-text>
			</view>
			<view class="list-content">
				<!-- 列表 -->
				<u-list class="list" v-if="scannedList && scannedList.length > 0" :height="ListViewHeight">
					<u-list-item v-for="(item, index) in scannedList" :key="item.id"
						@click="scannedDelete(item, index)">
						<view class="card">
							<view class="right">
								<view class="title">
									外部编号: {{item.externalCode}}
								</view>
								<view class="body">
									工序流转单号: {{item.produceTransferFormCode}}
								</view>
								<view class="body">
									物料:{{ item.materialCode }}({{ item.materialName }})
								</view>
								<view class="body">
									<label class="span">工作中心:{{ item.workCenterCode }} -
										{{ item?.workCenterName || '待定' }}</label>
								</view>
								<view class="body">
									<label class="span">成品数量: {{item.productQuantity }}</label>
									<label class="span">数量单位: {{item.quantityUnit}}</label>
								</view>
							</view>
							<view class="left">
								<u-icon name="checkmark-circle-fill" color="#42b20e" size="26px"></u-icon>
							</view>
						</view>

						<u-line></u-line>
					</u-list-item>
				</u-list>
				<!-- 空数据 -->
				<view v-else>
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</view>
			</view>
			<u-line></u-line>
			<view class="search">
				<u-button type="primary" @click="confirmReceiveData" class="custom-style">转移提交</u-button>
			</view>
		</view>
		<u-modal :show="messageShow" :closeOnClickOverlay="false" title="提示" content="确定在制品进行线边转移吗提交吗？"
			:showCancelButton="true" @confirm="messageConfirm" @cancel="messageCancel"></u-modal>
		<u-modal :show="showImport" ref="uModal" :content="`当前外部编号为${selectOrder?.externalCode ?? ''}, 请确认是否取消转移？`"
			confirmText="确认" showCancelButton @cancel="cancelImport" @confirm="confirmImport"></u-modal>
	</view>
</template>

<script setup lang="ts">
	import { computed, reactive, ref } from 'vue';
	import ScanBar from '@/components/scan-bar/index.vue';
	import { onShow, onPullDownRefresh } from '@dcloudio/uni-app';
	import { http } from "../../../utils/http";
	import { PageResult } from '../../../types/type';
	import { useUserStore } from '../../../stores/useUserStore';
	import { produceWorkshopList } from '@/api/common';
	import { useDictionaryStore } from '../../../stores/useDictionaryStore';
	// 重置表单信息 & 光标自动blur
	const scanBarRef = ref();
	const datekey = ref(new Date());
	const ListViewHeight = ref(0);
	const messageShow = ref(false);
	const workCenterList = reactive([]);
	const showWorkCenter = ref(false);
	const workCenterId = ref();
	const workCenterName = ref();
	const workCenterCode = ref();
	const workCenterCodeName = ref();
	// 登录工作组信息
	const loginWorkInfo = computed(() => JSON.parse(useUserStore().loginWorkInfo));
	

	//已扫描集合
	const scannedList : any = ref([])
	onShow(async () => {
		ListViewHeight.value = uni.getSystemInfoSync().windowHeight - 160;
		console.log('ListViewHeight.value', ListViewHeight.value);

		const { data } = await produceWorkshopList({})
		data.forEach((item) => {
			item.name = `${item.workshopCode}-${item.workshopName}`
		})
		workCenterList[0] = data
		workCenterId.value = loginWorkInfo.value.workCenterId
		workCenterName.value = loginWorkInfo.value.workCenterName
		workCenterCode.value = loginWorkInfo.value.workCenterCode
		workCenterCodeName.value = workCenterCode.value + "-" + workCenterName.value;
	})
	async function workCenterSelect(e) {
		workCenterId.value = e.value[0].id;
		workCenterName.value = e.value[0].workshopName;
		workCenterCode.value = e.value[0].workshopCode;
		workCenterCodeName.value = e.value[0].workshopCode + "-" + e.value[0].workshopName;
		showWorkCenter.value = false;
	}
	function hideKeyboard() {
		showWorkCenter.value = true;
		uni.hideKeyboard();
	}
	onPullDownRefresh(() => {
		scannedList.value = [];
	});
	// 选择订单
	const selectOrder = ref({});
	const selectIndex = ref();
	const showImport = ref(false);
	function scannedDelete(item : any, index : number) {
		showImport.value = true;
		selectOrder.value = item;
		selectIndex.value = index;
	}
	// 取消选择订单
	function cancelImport() {
		showImport.value = false;
		selectOrder.value = {};
		selectIndex.value = null;
	}
	// 删除
	async function confirmImport() {
		scannedList.value.splice(selectIndex.value, 1)
		showImport.value = false;
		uni.showToast({
			title: '取消成功'
		});
	}
	// 获取扫码结果
	async function getScanResult(result) {
		if (!result) {
			return
		}
		scanBarRef.value.reset()
		datekey.value = new Date()
		console.log('扫码结果', result);
		// current.value += 1;
		const res : PageResult<any> = await http({
			method: 'POST',
			url: '/mes/mesproducetransferform/getByExternalCode',
			data: {
				externalCode: result,
				// workCenterId: loginWorkInfo.value.workCenterId,
			}
		});
		console.log(res)
		let hasBarCode = true;
		if (res.data) {
			const list = res.data
			//校验是否重复扫描
			scannedList.value.forEach((item) => {
				if (item.externalCode == result) {
					uni.$u.toast('重复扫描！');
					hasBarCode = false
					scanBarRef.value.reset()
				}
			})
			//判断数量单位类型是否是数字
			if (Number(list.quantityUnit) && !isNaN(Number(list.quantityUnit))) {
				list.quantityUnit = useDictionaryStore().filterDictName("MeasurementUnit", list.quantityUnit)
			}
			if (hasBarCode) {
				scannedList.value.push(list);
			}
		} else {
			uni.$u.toast('未找到对应工序流转单！');
		}

	}
	//转移提交弹出
	async function confirmReceiveData() {
		if (scannedList.value.length == 0) {
			uni.$u.toast('最少扫描一箱在制品！');
		} else {
			if (workCenterId.value) {
				messageShow.value = true;
			} else {
				uni.$u.toast('请选择转移目标工作中心！');
			}
		}

	}
	//转移提交确认
	async function messageConfirm() {
		messageShow.value = false;
		const res = await http({
			url: '/mes/mesproducetransferform/productsTransfer',
			method: 'POST',
			data: {
				"externalCodes": scannedList.value.map(item => item.externalCode),
				"workCenterId": workCenterId.value,
				"workCenterName": workCenterName.value,
				"workCenterCode": workCenterCode.value

			}
		});
		if (res.code == "200") {
			uni.$u.toast('转移成功');
			scannedList.value = [];
		};
	}
	//提交取消
	function messageCancel() {
		messageShow.value = false;
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
	}

	.upload-scan {
		padding: 10px 40rpx 10px 40rpx;
	}

	.area-header {
		color: #909193;
		padding: 10px 15px;
		margin-bottom: 0;
		font-size: 15px;
		background-color: #f3f4f6;
		display: flex;
	}

	.list-content {
		padding: $uni-page-padding;

		.list {
			.card {
				margin-top: 5px;
				margin-bottom: 10px;
				border-radius: 7px;
				display: flex;
				align-items: center;
				padding: 10px 0;
				transition: all 300ms ease;
				box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

				.left {
					// flex-basis: 90rpx;
					// padding-right: 10px;
					text-align: right;
					font-size: 13px;

					.enter {
						line-height: 20px;
						margin-bottom: 5px;
					}

					.number {
						font-size: 13px;
						line-height: 18px;
					}

					:deep(.u-icon--right) {
						flex-direction: row-reverse;
					}
				}

				.right {
					flex: 1;
					padding-left: 15px;

					.title {
						font-size: 15px;
						line-height: 20px;
						margin-bottom: 5px;
						font-weight: 700;
					}

					.body {
						font-size: 13px;
						line-height: 18px;

						.span {
							width: 80%;
							// text-align: left;
							display: inline-block;
						}
					}
				}
			}
		}
	}

	.search {
		display: flex;
		flex: 1;

		.custom-style {
			// width: 120px;
			margin: 12px 5px 5px;
			height: 40px;
			border-radius: 8px;

			&:nth-child(1) {
				flex: 1
			}

			&:nth-child(2) {
				flex: 3
			}
		}
	}
</style>